import React, { Fragment, useEffect } from 'react';

import { DatePicker, Form, Alert } from 'antd';
import { size } from 'lodash';
import moment from 'moment';
import xss from 'xss';

import LimitInput from '@/components/LimitInput';

// 修改入职时间表单
const ChangeEntryDate = ({ form, data = {} }) => {
    const { getFieldDecorator, setFieldsValue } = form;
    const { entryDate, applyEntryDate, applyEntryDateReason, applyEntryDateStatus } = data;
    useEffect(() => {
        setFieldsValue({
            reason: undefined
        });
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    useEffect(() => {
        setFieldsValue({
            entryDate: size(applyEntryDate) > 0 ? moment(applyEntryDate) : undefined
        });
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [applyEntryDate]);

    return (
        <Fragment>
            <Alert
                message="提交后系统将自动发送邮件，通知候选人最终入职日期"
                type="warning"
                showIcon
                style={{ border: 0, margin: '-12px' }}
            />
            <br />
            <Form.Item label="原入职日期" style={{ margin: '14px 0' }}>
                {entryDate ? moment(entryDate).format('YYYY-MM-DD') : '-'}
            </Form.Item>
            {size(applyEntryDate) > 0 && applyEntryDateStatus === 'waitfor' && (
                <Form.Item label="期望入职日期" style={{ margin: '-8px 0' }}>
                    {applyEntryDate ? moment(applyEntryDate).format('YYYY-MM-DD') : '-'}
                </Form.Item>
            )}
            {size(applyEntryDateReason) > 0 && applyEntryDateStatus === 'waitfor' && (
                <Form.Item label="修改原因" style={{ margin: '14px 0' }}>
                    <div
                        style={{ wordBreak: 'break-all', display: 'inline' }}
                        // eslint-disable-next-line react/no-danger
                        dangerouslySetInnerHTML={{
                            __html: xss(applyEntryDateReason?.replace(/\s+/g, '<br>'))
                        }}
                    />
                </Form.Item>
            )}
            <Form.Item
                label="新入职日期"
                extra={
                    <div style={{ fontSize: 12, color: '#B9B9B9' }}>
                        将自动通知相关人员（用人部门主管和入职流程当前处理人）
                    </div>
                }
            >
                {getFieldDecorator('entryDate', {
                    rules: [
                        {
                            required: true,
                            message: '请选择'
                        }
                    ]
                })(<DatePicker />)}
            </Form.Item>
            <Form.Item label="备注">
                {getFieldDecorator('reason', {
                    rules: [
                        {
                            required: true,
                            message: '不能为空'
                        },
                        {
                            max: 1000,
                            message: '不能超过1000个字符'
                        }
                    ]
                })(<LimitInput area rows={4} placeholder="请输入" maxLength={1000} />)}
            </Form.Item>
        </Fragment>
    );
};

export default ChangeEntryDate;
